<template>
  <Edialog
    title="函数选择器(双击确认)"
    :outershow="visible"
    width="50%"
    @close="handleClose"
    :internal="true"
  >
    <AHMF
      :asideWidth="300"
      :rightTitleShow="false"
      :AShow="false"
      style="height: 70vh"
    >
      <template #header>
        <topSearcher
          :searchOptions="searchOptions"
          @onQuery="onQuery"
          @onReset="onReset"
          :border="false"
        ></topSearcher>
      </template>
      <template #main>
        <ETable
          v-if="visible"
          :data="tableData"
          :titleObj="tableColumns"
          @sortFun="sortFun"
          :loading="tableLoading"
          @row-dblclick="rowdbckick"
        >
        </ETable>
      </template>
      <template #footer>
        <div class="flex">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
          </el-pagination>
        </div>
      </template>
    </AHMF>
  </Edialog>
</template>

<script>
import topSearcher from "@/components/topSearcher/topSearcher.vue";
import AHMF from "@/components/topSearcher/AHMF.vue";
import ETable from "@/components/ETable";
import Edialog from "@/components/Edialog";
import { BsFunctionApi, BsFunctionToggleByIdApi } from "@/api/fxManage";
export default {
  components: {
    AHMF,
    topSearcher,
    ETable,
    Edialog,
  },

  data() {
    return {
      //表格字段
      tableColumns: [
        {
          prop: "funcName",
          label: "函数名称",
          // sortable: "custom",
        },
        {
          prop: "funcCode",
          label: "函数标识",
        },
        { prop: "remark", label: "函数说明" },
        { prop: "paramsRemark", label: "参数说明" },
        // {
        //   prop: "enable",
        //   type: "color",
        //   colorArr: [{ name: "停用", color: "red" }],
        //   label: "状态",
        // },
      ],
      // 搜索字段
      searchOptions: [
        {
          type: "input",
          label: "函数标识",
          key: "funcCode",
          value: "",
        },
      ],
      searchForm: {
        funcCode: "",
        sortStr: "&sortList[0].sortName=crTime&sortList[0].sortType=desc",
      },
      tableData: [],
      tableLoading: false,
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        total: 0,
      },
      visible: false,
    };
  },
  mounted() {
    // this.getTableData();
  },
  methods: {
    //双击表格事件
    rowdbckick(row) {
      console.log("函数", row);

      this.$emit("rowdbckick", row);
      this.handleClose();
    },
    open() {
      this.visible = true;
    },

    handleClose() {
      this.visible = false;
    },
    stopFn(scope) {
      this.$confirm(
        `确认${scope.enable == "停用" ? "启用" : "停用"}吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        BsFunctionToggleByIdApi(scope.id).then((res) => {
          console.log(res);
          if (res.data.bcode == 0) {
            this.$message({
              type: "success",
              message: res.data.bdata || res.data.bmsg || "操作成功",
            });
            this.getTableData();
          }
        });
      });
    },

    async sortFun(obj) {
      this.pageInfo.sortList = obj;
      if (obj == "") {
        return this.getTableData();
      }
    },

    // 获取表格数据
    async getTableData() {
      this.tableLoading = true;
      // 没有排序条件
      let obj = {
        currPage: this.pageInfo.currPage,
        pageSize: this.pageInfo.pageSize,
        enable: "1",
        ...this.searchForm,
      };
      let res = await BsFunctionApi(obj);
      if (res.data && res.data.bdata.total > 0) {
        this.tableData = res.data.bdata.gdata;
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach((item) => {
            item.enable = item.enable == 1 ? "启用" : "停用";
          });
        } else {
          this.tableData = [];
        }

        this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.tableLoading = false;
    },
    onReset(searchForm) {
      console.log("重置", searchForm);
      // this.searchForm = searchForm;
      this.pageInfo.currPage = 1;
      this.onQuery(searchForm);
    },
    onQuery(searchForm) {
      console.log("查询", searchForm);
      this.searchForm = searchForm;
      this.getTableData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.currPage = val;
      this.getTableData();
    },
    onSubmit() {
      console.log("submit!");
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>
<style lang="scss" scope></style>
